<template>
    <div class="layout">
        <el-menu mode="horizontal" menu-trigger="click" class="top-menu" :default-active="activeIndex"
            text-color="rgb(114, 114, 114)" active-text-color="black">
            <el-menu-item index="1" class="main">力扣</el-menu-item>
            <el-menu-item index="2">学习</el-menu-item>
            <el-menu-item index="3">题库</el-menu-item>
            <el-menu-item index="4">竞赛</el-menu-item>
            <el-menu-item index="5">讨论</el-menu-item>
            <el-menu-item index="6">求职</el-menu-item>
            <el-sub-menu index="7" class="store" text-color="rgb(255, 187, 98)">
                <template #title>商店</template>
                <el-menu-item index="7-1">精品商城</el-menu-item>
                <el-menu-item index="7-2">力扣周边</el-menu-item>
                <el-menu-item index="7-3">plus会员</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="8">
                <el-icon class="is-searching">
                    <Search />
                </el-icon>
            </el-menu-item>
            <el-menu-item index="9">
                <el-icon class="bell">
                    <Bell />
                </el-icon>
            </el-menu-item>
            <el-menu-item index="10">
                <el-icon>
                    <Checked />
                </el-icon>
            </el-menu-item>
            <el-menu-item index="11">
                <el-icon>
                    <User />
                </el-icon>
            </el-menu-item>
        </el-menu>
    </div>
    <div class="content">
        <router-view></router-view>
    </div>
</template>

<script setup>

</script>

<style lang="css" scoped>

.layout {
  display: flex;
  flex-direction: row; /* 水平排列 */
}

.top-menu {
  position: fixed;     /* 固定定位 */
  top: 0;              /* 固定在顶部 */
  left: 0;             /* 左侧开始 */
  right: 0;            /* 右侧结束 */
  z-index: 999;        /* 确保菜单在其他内容之上 */
}

.content {
  margin-top: 4rem;    /* 与菜单高度相同，以避免内容被遮挡 */
  flex: 1;             /* 内容区域占据剩余空间 */
  overflow-y: auto;    /* 如果内容超过容器高度，则显示滚动条 */
}

</style>